<template>
  <div class="wrap">
    <div class="navigator" @click="showMask = true">
      我的押金
      <img src="@/assets/question.png" alt="" class="question" />
    </div>
    <div class="rentWrap" :style="backgroundDiv">
      <p class="Expalin"><em class="yang">￥</em>{{ shopInfo.cashPledge }}</p>
      <p class="date">最低要求：{{ shopInfo.lowCash }}元</p>
      <div class="btnWrap">
        <p class="withdraw" @click="jumpCashPledgeRedemption">赎回</p>
        <p class="topUp" @click="jumpCashPledgeGive">缴纳</p>
      </div>
    </div>
    <div class="bottomListWrap">
      <div v-if="resCashRecordList.length > 0">
        <div class="item" v-for="(item, index) in resCashRecordList" :key="index">
          <div class="topWrap">
            <p class="textExplain">
              {{
                item.type == 0
                  ? "充值"
                  : item.type == 1
                  ? "赎回"
                  : item.type == 2
                  ? "违规处罚"
                  : ""
              }}
            </p>
            <div class="rightText">
              <em>{{ item.price }}</em>
              <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
            </div>
          </div>
          <div class="time">{{ item.createTime }}</div>
        </div>
      </div>
      <div v-else>暂无记录</div>
    </div>
    <!-- 遮罩层-押金规则说明 -->
    <div class="maskWrap" v-if="showMask">
      <div class="maskBg" @click="showMask = false"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">押金规则说明</div>
        <div class="maskExpalin" v-html="resExplainApply.content"></div>
        <div class="maskBack" @click="showMask = false">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
import { RadioGroup } from "vant";
import { apiAppUserInfo, apiExplainCash, apiCashRecordList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      backgroundDiv: {
        backgroundImage: "url(" + require("@/assets/bMyWallet.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      showMask: false,
      shopInfo: "", //店铺信息
      resExplainApply: "", //余额提现说明
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resCashRecordList: [], //押金缴纳记录列表
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getBalance();
    this.getAppUserInfo();
    this.getCashRecordList();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.getCashRecordList();
      }
    },
    //押金规则说明：
    getBalance() {
      apiExplainCash({}).then((res) => {
        this.resExplainApply = res.data;
      });
    },
    //用户信息获取店铺押金、余额等信息
    getAppUserInfo() {
      apiAppUserInfo({}).then((res) => {
        this.shopInfo = res.data;
      });
    },
    //查询押金记录列表:
    getCashRecordList() {
      var page = (this.reqPageNum += 1);
      console.log("page", page);
      apiCashRecordList({
        pageNum: page,
        pageSize: this.reqpageSize,
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.resCashRecordList = [...this.resCashRecordList, ...dataRes];
        console.log("resCashRecordList-押金记录", this.resCashRecordList);
      });
    },
    //缴纳：
    jumpCashPledgeGive() {
      this.$router.replace({
        path: "/pages/bCashPledgeGive",
        query: {
          //传递参数
          fromId:0
        },
      });
    },
    //赎回：
    jumpCashPledgeRedemption() {
      this.$router.replace({
        path: "/pages/bCashPledgeRedemption",
        query: {
          //传递参数
        },
      });
    },
    //我的银行卡
    jumpBankCarList() {
      this.$router.push({
        path: "/pages/myBankCarList",
        query: {
          //传递参数
        },
      });
    },
    //支付密码管理：
    jumpPayPassWord() {
      this.$router.replace({
        path: "/pages/bSetPassword",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
  },
};
</script>

<style scoped>
.navigator {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #181818;
}
.question {
  width: 15px;
  padding-top: 5px;
}
.rentWrap {
  width: 95%;
  margin: 0 auto;
  height: 147px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}
.Expalin {
  text-align: center;
  font-size: 24px;
  padding-top: 25px;
}
.yang {
  font-size: 12px;
}
.date {
  text-align: center;
  font-weight: 600;
  margin-top: 5px;
}
.btnWrap {
  width: 50%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 20px;
}
.withdraw {
  width: 60px;
  height: 26px;
  line-height: 26px;
  border: 1px solid #ffffff;
  border-radius: 13px;
  text-align: center;
}
.topUp {
  color: #f48f5b;
  width: 60px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background: #f6f6f8;
  border-radius: 13px;
}
.bottomListWrap {
  width: calc(95% - 40px);
  margin: 10px auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  padding-bottom: 5px;
}
.item {
  font-size: 13px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 25px;
  /* border-bottom: 1px solid #f6f6f8; */
}
.textExplain {
  float: left;
}
.rightText {
  float: right;
}
.rightArrow {
  padding-left: 3px;
  width: 5px;
  height: 9px;
}
.topWrap {
  overflow: hidden;
  margin-bottom: 10px;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  top: 30vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  width: 115px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 22px;
}
</style>
